<template>
  <el-container class="main">
    <el-header height="20px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>易货常识</el-breadcrumb-item>
        <el-breadcrumb-item>{{active.title}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu :default-active="activeIndex + ''" @select="onSelect">
          <el-menu-item v-for="(item, index) of menu" :key="index" :index="index + ''">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div v-show="active.title === '易货概念'">
          <p class="title">{{active.title}}</p>
          <ol>
            <li>什么是易货？</li>
            <p class="answer"><strong>答：</strong>易货是指政府企业及个人之间对商品和服务的等值交换。</p>
            <li>什么是现代易货？</li>
            <p class="answer"><strong>答：</strong>现代易货从本质上讲，属于一种商品集市（Market Place）、易货银行（Barter Bank）和交易场（Exchange）的综合业务体系。</p>
            <li>什么是企业易货？</li>
            <p class="answer"><strong>答：</strong>企业与企业之间等值产品的互换，不涉及货币或补贴少量货币的交易，使采购需求与产品销售同步实现。</p>
          </ol>
        </div>
        <div v-show="active.title === '易货现象'">
          <p class="title">{{active.title}}</p>
          <ol>
            <li>国际易货现状</li>
            <p>易货被视为一种能够增加资产、进入新市场、增加利润和创造财富的工具，在国际间越来越受重视。据专家估计，易货交易占世界总交易达百分之二十到二十五。 世界500强企业80%进行易货，仅在美国，就有47万家公司进行易货，每年易货交易额达120亿美元。在纽约股票交易所上市公司中65%都在使用易货方式减少剩余库存，提高销售额，并使生产设备充分运转。</p>
            <li>中国易货现状</li>
            <p>中国的易货行业仍处于发芽阶段。我国加入WTO后，国内企业和国外的接触更为广泛，易货概念将迅速被企业接受，而对企业最为实惠的是：企业通过易货的方式交易，“以物换物”不产生现金流只记入库。</p>
            <p>现代易货在发达国家的发展表明它有存在和发展的客观基础，在中国也一定有广阔的发展空间，我们正面临着一个巨大的商机。 上个世纪90年代初期被视作一个易货业腾飞的阶段，而21世纪初将是中国易货经济增长的黄金时期。</p>
          </ol>
        </div>
        <div v-show="active.title === '易货优势'">
          <p class="title">{{active.title}}</p>
          <ol class="youshi">
            <li>增加销量，开辟新的销售渠道；易其所需，节省现金支出。</li>
            <li>解决库存积压，盘活企业资产；拉动消费，促进经济发展，扩大贸易机会。</li>
            <li>节省大量的销售成本，充分利用剩余产能。</li>
            <li>减少中间周转环节，减少产品损耗。</li>
            <li>因产量增加可在采购时压低价格。</li>
            <li>使部分即将破产的企业盘活资产，东山再起。</li>
            <li>提高产值，提升企业在行业内的地位和品牌价值。</li>
            <li>因产量增加带动就业岗位增加。</li>
          </ol>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>

  export default {
    data() {
      return {
        active: undefined,
        menu: [
          { title: '易货概念', icon: 'el-icon-document' },
          { title: '易货现象', icon: 'el-icon-shopping-cart-2' },
          { title: '易货优势', icon: 'el-icon-sell' }
        ]
      };
    },
    methods: {
      onSelect(index) {
        this.active = this.menu[index];
      }
    },
    computed: {
      activeIndex() {
        const page = parseInt(this.$route.query.page);
        for (let i = 0; i < this.menu.length; ++i) {
          if (page !== i) continue;
          return i;
        }
        return 0;
      }
    },
    watch: {
      activeIndex(val) {
        this.active = this.menu[val];
      }
    },
    created() {
      this.active = this.menu[0];
    }
  };
</script>
<style lang="scss" type="text/scss" scoped>
.main {
  background: white;
  padding-top: 30px;
  height: 600px;
}
.el-menu {
  height: 100%;
  border: 1px solid $c1;
}
.el-header {
  border-bottom: 2px solid $c1;
  margin-bottom: 10px;
  padding: 0;
}
.el-main {
  margin-left: 10px;
  border: 1px solid $c1;
  li {
    margin-top: 40px;
    color: $c1;
  }
}
.title {
  font-size: 21px;
  font-weight: bold;
  font-family: "微软雅黑","sans-serif";
  text-align: center;
}
.answer {
  border-bottom: 2px solid $c1;
}
.footer {
  margin-top: 60px;
  font-weight: bold;
}
.youshi li {
  color: black;
  margin-top: 30px;
  border-bottom: 2px solid $c1;
}
</style>
